<template>
    <div  class="app-container"  >
          <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
             <el-form-item label="" prop="name">
                <el-input
                   v-model="queryParams.name"
                   placeholder="请输入参数分类"
                   clearable
                   style="width: 200px"
                   @keyup.enter="handleQuery"
                />
             </el-form-item>
             <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
             </el-form-item>
          </el-form>
    
          <el-row :gutter="10" class="mb8">
             <el-col :span="1.5">
                <el-button  type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
             </el-col>
             <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
          </el-row>
          <el-table v-loading="loading" :data="templateList" border>
             <el-table-column prop="name" align="center" label="参数分类名称" :show-overflow-tooltip="true"></el-table-column>
             <el-table-column prop="status" label="状态" align="center" :show-overflow-tooltip="true">
                <template #default="scope">
                 <div v-if="scope.row.status">使用中</div>
                 <div v-else>禁用</div>
                </template>
            </el-table-column>
             <el-table-column prop="update_time" align="center" label="更新时间" :show-overflow-tooltip="true"></el-table-column>
             <el-table-column label="操作" align="center" width="210" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-tooltip content="查看" placement="top">
                      <el-button  link type="primary" icon="View" @click="handleView(scope.row,'查看')"></el-button>
                     </el-tooltip>
                     <el-tooltip content="编辑" placement="top">
                      <el-button  link type="primary" icon="Edit" @click="handleView(scope.row,'编辑')"></el-button>
                     </el-tooltip>
                     <el-tooltip content="删除" placement="top">
                      <el-button  link type="primary" icon="Delete" @click="handleDel(scope.row)"></el-button>
                     </el-tooltip>
                </template>
             </el-table-column>
          </el-table>
          <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.page_size"
          v-model:limit="queryParams.page_count"
          @pagination="getList"
        />
         <!-- 新增与修改参数组对话框 -->
       <el-dialog :title="titleName" v-model="paramterShow" width="600px" append-to-body>
          <el-form :model="form" :rules="rules" ref="addClassifiedRef" label-width="120px">
             <el-row>
                <el-col :span="16">
                   <el-form-item prop="name" label="参数分类名称：">
                    <el-input v-model="form.name" :disabled="!isViewShow"  placeholder="请输入参数分类名称" maxlength="30" />
                    <div class="tips">不可相同参数分类名称</div>
                   </el-form-item>
                   <el-form-item label="参排序值："  prop="sortNum">
                      <el-input 
                      v-model="form.sortNum" 
                      placeholder="" 
                      :disabled="!isViewShow" 
                      maxlength="3"
                      oninput="if(value>100){value=100}else{value=value.replace(/[^\d]/g,'')}if(value.indexOf(0)==0){value=0}" />
                      <div class="tips">排序值越小显示越靠前,不填写默认为0</div> 
                   </el-form-item>
                   <el-form-item prop="status" label="是否启用：">
                      <el-radio-group   :disabled="!isViewShow"  v-model="form.status">
                         <el-radio
                            v-for="dict in enableUse"
                            :key="dict.value"
                            :label="dict.value"
                         >{{ dict.label }}</el-radio>
                      </el-radio-group>
                      <div class="tips">启用后在配置担保产品时，可使用该参数分类</div> 
                     </el-form-item>
                </el-col>
             </el-row>
          </el-form>
          <template #footer>
             <div class="dialog-footer" v-show="isViewShow">
                <el-button type="primary" @click="submitForm">提交</el-button>
                <el-button @click="cancel">取 消</el-button>
             </div>
          </template>
       </el-dialog>
       </div>
 </template>
 
 <script setup name="Template">
 import { parameterAdd , parameterList , parameterDel , parameterUpdate } from "@/api/product/parameter";
 const { proxy } = getCurrentInstance();
 const router = useRouter()
 const templateList = ref([]);
 const loading = ref(false);
 const showSearch = ref(true);
 const titleName =  ref('添加参数分类');
 const paramterShow = ref(false);
 const isViewShow = ref(true)
 const enableUse = ref([{
    value:1,
    label:'是'
 },{
    value:2,
    label:'否'
 },])
 const total = ref(0);//总条数
 const data = reactive({
   queryParams: {
    page_size: 1,
    page_count: 10,
    name: '',
    type:"1",
    parent_id:""
   },
   form: {
    status:2
   },
   rules:{
      name:[{ required: true, message: "参数分类名称不能为空", trigger: "blur" }, { min: 2, max: 20, message: "参数分类名称长度必须介于 2 和 20 之间", trigger: "blur" }],
      status:[{ required: true, message: "请选择是否启用", trigger: "change" }]
   } 
 });
 const { queryParams ,form,rules} = toRefs(data);
 /** 查询菜单列表 */
 function getList() {
   loading.value = true;
   parameterList(queryParams.value).then(response => {
    loading.value = false;
    if(response.data.total_page > 0){
       templateList.value = response.data.list;
    }else{
       templateList.value = []
    }
    total.value = response.data.total_page;
   });
 }
 /** 搜索按钮操作 */
 function handleQuery() {
    queryParams.value.page_size = 1;
    getList();
 }
 /** 重置按钮操作 */
 function resetQuery() {
   proxy.resetForm("queryRef");
   handleQuery();
 }
 /**重置表单信息*/
 function resetFormItme(){
   form.value ={
      id:undefined,
      name:undefined,
      sortNum:undefined,
      status:undefined
   };
   proxy.resetForm("addClassifiedRef");
 }
 /** 新增按钮操作 */
 function handleAdd() {
    isViewShow.value = true;
    titleName.value = '添加参数分类';
    paramterShow.value = true;
    resetFormItme();
 }
 /** 取消按钮 */
 function cancel() {
   resetFormItme();
    paramterShow.value = false;
 };
  /** 提交按钮 */
  function submitForm() {
   /*判断参数分类名称是否重复*/
   proxy.$refs["addClassifiedRef"].validate(valid => {
     if (valid) {
            let isRepetition = templateList.value.filter(item=>{
                  return item.name ==  form.value.name && item.id!==form.value.id
            })
               if( isRepetition.length > 0 ){
                  return proxy.$modal.msgWarning('已有相同的参数分类名称，请重新输入');
               }
          if(titleName.value == '添加参数分类'){
            parameterAdd({
                ...form.value,
                type:"1",
                sortNum:form.value.sortNum==''?0:form.value.sortNum
            }).then(response => {
               if(response.code=='200'&&response.data){
                  proxy.$modal.msgSuccess("新增成功");
                      paramterShow.value = false;
                      getList();
               }else{
                  return proxy.$modal.msgWarning(response.msg);
               }
              });
          }else{
            parameterUpdate({
                ...form.value,
                sortNum:form.value.sortNum==''?0:form.value.sortNum
            }).then(response => {
               if(response.code=='200'&& response.data){
                   proxy.$modal.msgSuccess("更新成功");
                   paramterShow.value = false;
                   getList();
               }else{
                  return proxy.$modal.msgWarning(response.msg);
               }
             })
          }
     }
   });
 };
 /**查看、编辑*/
 function handleView(row,type){
     titleName.value = `${type}参数分类`;
     paramterShow.value = true;
     form.value = {
                 id : row.id,
                 type : row.type,
                 name : row.name,
                 status : row.status,
                sortNum:row.sort_num
              };
    if(type=='查看'){
        isViewShow.value = false;
    }else{
        isViewShow.value = true;
    }
 }
 /** 删除操作 */
 function handleDel(row) {
    proxy.$modal.confirm('是否确认删除该数据项？').then(function () {
    return parameterDel(row.id) ;
  }).then((res) => {
         if(res.code =='200'&& res.data){
            getList();
            proxy.$modal.msgSuccess("删除成功");
         }else{
            return proxy.$modal.msgWarning(res.msg);
         }
  }).catch(() => {});
 }
 
 getList();
 </script>
 <style >
.tips{
    line-height: 32px;
    font-size: 12px;
}
 </style>
 